<template>
  <div class="channel-container">
    <div class="channel-one">
      <van-cell-group>
        <van-cell title="我的频道">
          <van-button plain type="warning" round size="mini" @click="editBtn" v-if="flag">编辑</van-button>
          <van-button plain type="danger" round size="mini" @click="editBtn" v-else>完成</van-button>
        </van-cell>
      </van-cell-group>
    </div>
    <div class="channel-two">
      <van-grid :gutter="10">
        <van-grid-item
          v-for="(item,index) in myChannels"
          :key="index"
          class="grid-item"
          @click="myBtn(item.id,index)"
        >
          <span :class="{active:index==active}">{{item.name}}</span>
          <van-icon name="clear" class="icon" v-show="show && item.id!==0 " />
        </van-grid-item>
      </van-grid>
    </div>
    <div class="channel-three">
      <van-cell-group>
        <van-cell title="频道推荐"></van-cell>
        <van-grid :gutter="10">
          <van-grid-item v-for="(item,index) in orChannel" :key="index" @click="addChannel(item,index)">
            <i>+</i>
            <span>{{item.name}}</span>
          </van-grid-item>
        </van-grid>
      </van-cell-group>
    </div>
  </div>
</template>
           
<script>
import { getchannelsAll_api, delUserchannels_api,addMyChannel_api } from "@/api/login/index";
import arraySet from "@/common/array-set.js";//封装的数组取不同的函数
import { SET_TOKEN } from "@/utils/storage";
import { mapState } from 'vuex'
export default {
  props: ["myChannels", "active"],
  data() {
    return {
      channelsAll: [],
      flag: true,
      show: false,
      fiexdChannel: [0] //固定频道不能删除
    };
  },
  created() {
    this.getChannelsAll();
  },
  computed: {
    ...mapState(['user']),
    //总频道和我的频道对比，取不同-------------------------------
    orChannel() {
      var newArr = [];
      this.channelsAll.forEach(item => {
        var flag = this.myChannels.some(item2 => item2.id == item.id);
        if (!flag) {
          newArr.push(item);
        }
      });
      return newArr;
    }
  },
  methods: {
    //获取总列表--------------------------------------
    async getChannelsAll() {
      try {
        const { data: res } = await getchannelsAll_api();
        this.channelsAll = res.data.channels;
      } catch (err) {
        this.$toast.fail("获取失败");
      }
    },
    //编辑我的频道----------------------------
    editBtn() {
      this.flag = !this.flag;
      this.show = !this.show;
    },
    async myBtn(id, index) {
      //显示叉叉，做删除操作------------------
      if (this.show) {
        //默认推荐频道不能删除----如果id的索引为0 则 return 后面的代码不执行-----
        if (this.fiexdChannel.includes(id)) {
          console.log("默认不能删");
          // return
        }
        //执行删除-------------------------
        this.myChannels.splice(index, 1);
        //如果删除的是当前高亮频道的前面，就让active-1，如果删除的后面没关系
        //当前高亮是 父组件传过来的active
        //点击当前的索引 和 active 对比,true表示汉堡弹窗打开
        if (index < this.active) {
          this.$emit("father", this.active - 1, true);
        }
        //如果用户登录，发送ajax请求，完成删除和添加
        //如果未登录，做本地缓存
        //判断token登录状态,发送请求
        if (this.$store.state.user) {
          const { data: res } = await delUserchannels_api(id);
          console.log(res, 44444)
        } else {
          //未登录做本地缓存------------------
          SET_TOKEN("myChannels", this.myChannels);
        }
      } else {
        //如果是在非编辑状态下，点击我的频道直接切换到主页面-------------
        //编辑状态完成删除--------------
        //把当前导航条的索引传给编辑，跳转我的频道高亮----组件传值
        this.$emit("father", index, false);
      }
    },
    //添加到我的频道-----------------------------
   async addChannel(item) {
      // return console.log(item,45454);
      this.myChannels.push(item);
      //添加频道判断是登录还是未登录-------------------
      //登录----发送请求
      if(this.user) {
          const {data:res}=await addMyChannel_api([
            {id:item.id ,seq:this.myChannels.length}//获取添加后数组的长度
          ])
          // console.log(res,89898);
      }else {
          //未登录做本地存储
           SET_TOKEN("myChannels", this.myChannels)
      }
    }
  }
};
</script>
<style scoped lang="less">
.channel-container {
  .channel-one {
    margin-top: 70px;
    .van-button {
      padding: 5px 25px;
    }
  }
  /deep/.van-grid-item__content {
    background-color: #eee;
    padding: 16px 0;
    flex-direction: row;
    i {
      font-size: 35px;
    }
    span {
      font-size: 25px;
    }
  }
  .grid-item {
    position: relative;
    font-size: 24px;
    .icon {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 15px;
      color: #999;
    }
    .active {
      color: red;
    }
    /* 
     */
  }
}
</style>